<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :span="6">
        <el-form :model="Form" :rules="rules" ref="form" label-width="80px" size="small">
          <el-form-item label="终端类型" prop="category_id">
            <el-select v-model="Form.category_id">
              <el-option v-for="item in categorys" :key="item.category" :value="item.category" :label="item.category_name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="终端名称" prop="device_name">
            <el-input v-model="Form.device_name"></el-input>
          </el-form-item>
          <el-form-item label="终端描述" prop="desc">
            <el-input class="fz12" type="textarea" :rows="3" v-model="Form.desc"></el-input>
          </el-form-item>
        </el-form>
        <el-button class="fr mt-10" type="primary" size="small" @click="handleClickAdd">确认添加</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { TerminalConfigInit, TerminalConfigAdd } from '@/api/terminal'

export default {
  name: 'addTerminalConfig',
  components: {
    Breadcrumb
  },
  data() {
    return {
      categorys: [],
      Form: {
        desc: '',
        device_name: '',
        category_id: ''
      },
      rules: {
        device_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        category_id: [{ required: true, trigger: 'change', message: '必须选择哦~' }]
      }
    }
  },
  methods: {
    handleInit() {
      TerminalConfigInit().then(res => {
        if (res.data.errorCode === 0) {
          this.categorys = res.data.result.category
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickAdd() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          TerminalConfigAdd(this.Form).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.$refs['form'].resetFields()
              this.$router.go(-1)
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }
      })
    }
  },
  created() {
    this.handleInit()
  }
}
</script>
